import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import PageTitle from '../../../components/page-title';
import MUtil from '../../../utils/mm';
import Product from '../../../service/product-service';
import Pagination from '../../../utils/pagination'
import TableList from '../../../utils/tableList'
import ListSearch from './index-list-search'

import './index.scss'

const _mm = new MUtil()
const _product = new Product();

class ProductList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			currentPage: 1,
			list: [],
			listType: 'list',
			// searchType: '',
			// searchKeyword: ''
		 };
	}

	componentDidMount() {
		this.loadProductList()
	}

	// 获取列表数据
	loadProductList() {
		let listParam = {};
		listParam.listType = this.state.listType
		listParam.pageNum = this.state.currentPage
		// 如果是搜索类型的话需要传入值
		if(this.state.listType === 'search') {
			listParam.searchType = this.state.searchType
			listParam.keyword = this.state.searchKeyword
		}

		_product.getProductList(listParam).then(res=>{
			this.setState(res)
			console.log(this.state)
		},errMsg=>{
			this.setState({
				list: []
			});
			_mm.errorTips(errMsg)
		})
	}

	// 页数发生变化
	onPageNumChange(pageNum) {
		this.setState({
			currentPage: pageNum
		}, () => {
			this.loadProductList()
		})
	}

	// 改变商品状态
	onSetProductStatus(event, id, currentStatus) {
		let newStatus = currentStatus === 1? 2 : 1,
				confirmTips = currentStatus === 1? '确定要下架该商品？':'确定要上架该商品';
		if (window.confirm(confirmTips)) {
			_product.SetProductStatus({
				productId: id,
				status: newStatus
			}).then(
				res=> {
					_mm.successTips(res);
					this.loadProductList()
				},
				errMsg=>{
					_mm.errorTips(errMsg)
				}
			)
		}
	}
	// 搜索
	onSearch(searchType,searchKeyword) {
		let listType = searchKeyword === ''? 'list':'search'
		this.setState({
			listType: listType,
			currentPage: 1,
			searchType: searchType,
			searchKeyword: searchKeyword
		},() => {
			// 放到回调里边
			this.loadProductList()
		})

		console.log(searchType,searchKeyword)
	}

	render() {
		let tableHeads = [
			{name: '商品ID', width: '10%'},
			{name: '商品信息', width: '50%'},
			{name: '价格', width: '10%'},
			{name: '状态', width: '15%'},
			{name: '操作', width: '15%'},
		]

		return (
			<div id="page-wrapper">
				<PageTitle title="商品管理">
					<div className="page-header-right">
						<Link to="/product/save" className="btn btn-primary">
							<i className="fa fa-plus"></i>
							<span>添加商品</span>
						</Link>
					</div>
				</PageTitle>
				<ListSearch
					onSearch={
						(searchType,searchKeyword) => {
							this.onSearch(searchType,searchKeyword)
						}
					}
				/>
				<TableList tableHeads={tableHeads}>
					{
						this.state.list.map((product,index) => {
							return (
								<tr key={index}>
									<td>{product.id}</td>
									<td>
										<p>{product.name}</p>
										<p>{product.subtitle}</p>
									</td>
									<td>{product.price}</td>
									<td>
										<p>{product.status === 1? '在售':'已下架'}</p>
										<button className="btn btn-warning btn-xs"
											onClick={(e) => {this.onSetProductStatus(e , product.id, product.status)}}>
											{product.status === 1? '在售':'已下架'}
										</button>
									</td>
									<td>
										<Link className="opear" to={`/product/detail/${product.id}`}>查看详情</Link>
										<Link className="opear" to={`/product/save/${product.id}`}>编辑</Link>
									</td>
								</tr>
							)
						})
					}
				</TableList>
				<Pagination
					current={this.state.currentPage}
					total={this.state.total}
					onChange={(pageNum)=>this.onPageNumChange(pageNum)}
					showQuickJumper={true}
				/>
			</div>
		);
	}
}

export default ProductList;
